<template>
  <view class="con">
    <!-- 过滤 -->
    <view class="guolv flex flex_between">
      <view class="guolv_v1">过滤已结算</view>
      <switch checked color="#f9bf41" style="transform:scale(0.5)" />
    </view>
    <!-- 列表 -->
    <view class="list">
      <view class="listli">
        <view class="listlit flex flex_between">
          <view class="listlitz">
            <image class="listlitz_img" src="/static/index/img14.png"></image>
            <!-- <view class="listlitz_1">express</view> -->
            <view class="listlitz_2">乾遇官方旗舰店</view>
          </view>
          <view class="listlity shangXiaCenter">
            <view>
              <view class="listlity1 flex flex_between">
                <view class="listlity1z flex flex_between">
                  <view class="listlity1z1 flex">
                    <image class="listlity1z1_img" src="/static/mine/img34.png" mode="heightFix"></image>
                    <view class="listlity1z1_v">高马尾皮筋一罐</view>
                  </view>
                  <view class="listlity1z2 flex">
                    <image class="listlity1z2_img" src="/static/index/img16.png" mode="heightFix">
                    </image>
                    <view class="listlity1z2_v">0.6</view>
                  </view>
                </view>
              </view>
              <view class="zhen_add">3个问题，最高评价</view>
            </view>
            <view class="dibulicz flex flex_between">
              <view class="dibulicz1"></view>
              <navigator url="/packageA/index/productOperationDe" class="dibulicz2">去提交</navigator>
            </view>
          </view>
        </view>
      </view>
      <!-- 待审核 -->
      <view class="listli">
        <view class="listlit flex flex_between">
          <view class="listlitz">
            <image class="listlitz_img" src="/static/index/img14.png"></image>
            <!-- <view class="listlitz_1">express</view> -->
            <view class="listlitz_2">乾遇官方旗舰店</view>
          </view>
          <view class="listlity shangXiaCenter">
            <view>
              <view class="listlity1 flex flex_between">
                <view class="listlity1z flex flex_between">
                  <view class="listlity1z1 flex">
                    <image class="listlity1z1_img" src="/static/mine/img34.png" mode="widthFix"></image>
                    <view class="listlity1z1_v">高马尾皮筋一罐</view>
                  </view>
                  <view class="listlity1z2 flex">
                    <image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
                    </image>
                    <view class="listlity1z2_v">0.6</view>
                  </view>
                </view>
              </view>
              <view class="zhen_add">3个问题，最高评价</view>
            </view>
            <view class="dibulicz flex flex_between">
              <view class="dibulicz1"></view>
              <viee class="dibulicz2 huise">待审核</viee>
            </view>
          </view>
        </view>
      </view>
      <!-- 无效 -->
      <view class="listli">
        <view class="listlit flex flex_between">
          <view class="listlitz">
            <image class="listlitz_img" src="/static/index/img14.png"></image>
            <!-- <view class="listlitz_1">express</view> -->
            <view class="listlitz_2">乾遇官方旗舰店</view>
          </view>
          <view class="listlity shangXiaCenter">
            <view>
              <view class="listlity1 flex flex_between">
                <view class="listlity1z flex flex_between">
                  <view class="listlity1z1 flex">
                    <image class="listlity1z1_img" src="/static/mine/img34.png" mode="widthFix"></image>
                    <view class="listlity1z1_v">高马尾皮筋一罐</view>
                  </view>
                  <view class="listlity1z2 flex">
                    <image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
                    </image>
                    <view class="listlity1z2_v">0.6</view>
                  </view>
                </view>
              </view>
              <view class="zhen_add">3个问题，最高评价</view>
            </view>
            <view class="dibulicz flex flex_between">
              <view class="dibulicz1"></view>
              <viee class="dibulicz2 hongse">无效</viee>
            </view>
          </view>
        </view>
      </view>
      <!-- 已结算 -->
      <view class="listli">
        <view class="listlit flex flex_between">
          <view class="listlitz">
            <image class="listlitz_img" src="/static/index/img14.png"></image>
            <!-- <view class="listlitz_1">express</view> -->
            <view class="listlitz_2">乾遇官方旗舰店</view>
          </view>
          <view class="listlity shangXiaCenter">
            <view>
              <view class="listlity1 flex flex_between">
                <view class="listlity1z flex flex_between">
                  <view class="listlity1z1 flex">
                    <image class="listlity1z1_img" src="/static/mine/img34.png" mode="widthFix"></image>
                    <view class="listlity1z1_v">高马尾皮筋一罐</view>
                  </view>
                  <view class="listlity1z2 flex">
                    <image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
                    </image>
                    <view class="listlity1z2_v">0.6</view>
                  </view>
                </view>
              </view>
              <view class="zhen_add">3个问题，最高评价</view>
            </view>
            <view class="dibulicz flex flex_between">
              <view class="dibulicz1"></view>
              <viee class="dibulicz2 huise">已结算</viee>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="zhezhao" v-if="isShow || isShow_wen ||isShow_video" @click="hideTan"></view>
    <view class="tan" v-if="isShow">
      <view class="zhes_1 flex">
        <image class="zhes_1_img" src="/static/index/img17.png" mode="widthFix"></image>
        <text class="zhes_1_t">已抢到资格</text>
      </view>
      <view class="zhes_2 flex flex_between">
        <view class="zhes_2li">恭喜您抢到了该产品的运营资格</view>
      </view>
      <view class="zhes_3">请在10分钟之内完成，过期无效同时取消资格</view>
      <!-- 倒计时 -->
      <view class="Countdown">{{CountdownTime}}</view>
      <view class="zhes_5" @click="goProductOperationDe">我已知晓</view>
    </view>
    <!-- 通用问号弹出 -->
    <view class="tan tan_wen" v-if="isShow_wen">
      <view class="tan_title">关于低价专区</view>
      <view class="tan_t flex">
        <view class="tan_newli_wrap">
          <view class="tan_newli flex">
            <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
            <view class="tan_newli_v">本专区为共享专区，信息来源于网络</view>
          </view>
          <view class="tan_newli flex">
            <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
            <view class="tan_newli_v">每个ID每天仅限提取30个产品链接</view>
          </view>
          <view class="tan_newli flex">
            <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
            <view class="tan_newli_v">请您自行甄别真伪，避免您资金损失</view>
          </view>
          <view class="tan_newli flex">
            <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
            <view class="tan_newli_v">如您是商家您反对，请联系我们删除</view>
          </view>
          <view class="tan_newli flex">
            <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
            <view class="tan_newli_v">请不要将本专区信息应用于非法途径</view>
          </view>
        </view>

      </view>
      <view class="tan_b flex flex_between">
        <view class="tan_b_d2" @click="hideTan">我已知晓</view>
      </view>
    </view>
    <!-- 实操课程 -->
    <view class="tan tan_video" v-if="isShow_video">
      <video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
        @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        countdownTime: 10 * 60 * 1000, //倒计时初始时间
        isShow: false,
        isShow_wen: false,
        isShow_video: false
      };
    },
    methods: {
      showTan() {
        console.log('弹出倒计时')
        this.isShow = true
        this.isEndTime = false
        this.startCountdown(this.countdownTime);
      },
      // 去到产品运营-详情页
      goProductOperationDe() {
        uni.navigateTo({
          url: '/packageA/index/productOperationDe'
        })
      },
      showTan_wen() {
        this.isShow_wen = true
      },
      showTan_video() {
        this.isShow_video = true
      },
      hideTan() {
        this.isShow = false
        this.isShow_wen = false
        this.isShow_video = false
      }
    }
  }
</script>

<style scoped lang="scss">
  .con {
    .top {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      position: relative;
      z-index: 1;
      padding-top: 54rpx;

      .top1 {
        width: 100%;
        height: auto;
        align-items: normal;

        .top1v1 {
          width: 400rpx;
          height: 140rpx;
          border-radius: 0px 100rpx 100rpx 0px;
          background-color: rgba(249, 191, 65, 1);
          padding: 16rpx 30rpx;
          box-sizing: border-box;

          .top1v1_1 {
            .top1v1_1v1 {
              line-height: 58rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 48rpx;
              font-family: 'AvantGardeFont';
              font-weight: bold;
              margin-top: 5rpx;

              text {
                font-weight: 100;
              }
            }

            .top1v1_1img {
              width: 24rpx;
              position: relative;
              top: -15rpx;
            }
          }

          .top1v1_2 {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            margin-top: 6rpx;
          }
        }

        .top1v2 {
          width: 220rpx;
          height: 68rpx;
          border-radius: 100rpx;
          background-color: rgba(249, 191, 65, 1);
          justify-content: center;
          margin-right: 30rpx;

          .top1v2_img {
            width: 48rpx;
            height: auto;
          }

          .top1v2_v {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
          }
        }

      }

      .top2 {
        width: 650rpx;
        height: auto;
        margin: 30rpx;
        box-sizing: border-box;
        border-top: 2rpx solid #d3d3d3;
        padding: 30rpx 0;
        margin-top: 50rpx;
        margin-bottom: 20rpx;

        .top2li {
          width: 25%;
          text-align: center;

          .top2li_1 {
            width: 16rpx;
            height: 16rpx;
            border-radius: 100%;
            margin: 0 auto;
            position: relative;
            top: -38rpx;
            background-color: rgba(137, 137, 137, 1);
          }

          .top2li_2 {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            margin-top: -20rpx;
          }
        }
      }
    }

    .guolv {
      width: 100%;
      height: 90rpx;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      padding: 24rpx 30rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      padding-right: 0;
z-index: 1;
    position: relative;
      .guolv_v1 {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx;
      }
    }

    .list {
      width: 100%;
      height: auto;

      .listli {
        width: 100%;
        height: 260rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        overflow: hidden;
        padding: 30rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;

        .listlit {
          width: 100%;
          height: 200rpx;
          align-items: normal;
          overflow: hidden;
          .listlitz {
            width: 200rpx;
            height: 200rpx;
            border-radius: 20rpx;
            // overflow: hidden;
            position: relative;
            margin-right: 34rpx;

            .listlitz_img {
              width: 200rpx;
              height: 200rpx;
              border-radius: 20rpx;
            }

            .listlity1z1_v {
              width: 300rpx;
            }

            .listlitz_1 {
              position: absolute;
              height: 32rpx;
              border-radius: 0px 40rpx 40rpx 0px;
              background-color: rgba(249, 65, 65, 1);
              display: inline-block;
              color: rgba(255, 255, 255, 1);
              font-size: 24rpx;
              left: 0;
              top: 20rpx;
              line-height: 27rpx;
              padding: 0 10rpx;
            }

            .listlitz_2 {
              width: 100%;
              height: 44rpx;
              line-height: 44rpx;
              border-radius: 0px 0px 10px 10px;
              background-color: rgba(249, 191, 65, 1);
              color: rgba(16, 16, 16, 1);
              font-size: 24rpx;
              overflow: hidden;
              position: absolute;
              bottom: 0;
              text-align: center;
            }
          }

          .listlity {
            width: 500rpx;
            height: 200rpx;

            .listlity1 {
              width: 100%;
              box-sizing: border-box;
              .listlity1z {
                width: 100%;
                .listlity1z1 {
                  height: 40rpx;
                  .listlity1z1_img {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 10rpx;
                  }

                  .listlity1z1_v {
                    width: 260rpx;
                    height: 40rpx;
                    line-height: 42rpx;
                    color: rgba(16, 16, 16, 1);
                    font-size: 28rpx;
                    overflow: hidden;
                  }
                }

                .listlity1z2 {
                  height: 30rpx;
                  line-height: 40rpx;
                  border-radius: 40rpx;
                  background-color: rgba(216, 30, 6, 1);
                  color: rgba(16, 16, 16, 1);
                  font-size: 28rpx;
                  padding: 0 10rpx;
                  padding-right: 20rpx;
                  padding-left: 2rpx;
                  overflow: hidden;
                  .listlity1z2_img {
                    width: auto;
                    height: 30rpx;
                  }

                  .listlity1z2_v {
                    color: rgba(255, 255, 255, 1);
                    font-size: 28rpx;
                    margin-left: 8rpx;
                    font-family: 'AvantGardeFont';
                  }
                }
              }

            }

            .listlity2 {
              width: 100%;
              padding-right: 30rpx;
              box-sizing: border-box;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              font-family: 'AvantGardeFont';
              margin-top: 14rpx;

              text {
                font-size: 46rpx;
              }
            }

            .listlity3 {
              width: 100%;
              box-sizing: border-box;
              color: rgba(137, 137, 137, 1);
              font-size: 24rpx;
              margin-top: 42rpx;
              width: 100%;
              text-align: right;

              text {
                font-family: 'AvantGardeFont';
              }
            }

            .listlity4 {
              width: 100%;
              box-sizing: border-box;

              .listlity4cc {
                width: 100%;
                height: 16rpx;
                border-radius: 20rpx;
                margin-top: 6rpx;
                background-color: rgba(232, 230, 230, 1);
                position: relative;
              }

              text {
                width: 30%;
                height: 16rpx;
                border-radius: 20rpx;
                display: inline-block;
                background-color: rgba(249, 191, 65, 1);
                position: absolute;
                top: 0;
                left: 0;
                ;
              }
            }
          }
        }

        .listlib {
          width: 100%;
          height: auto;
          padding: 30rpx 0;
          padding-bottom: 0;
          box-sizing: border-box;

          .listlib_1 {
            width: 310rpx;
            height: 44rpx;
            background: #f00;
            line-height: 44rpx;
            border-radius: 40rpx;
            overflow: hidden;

            .listlib_1_t1 {
              background-color: rgba(249, 191, 65, 1);
              width: 50%;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }

            .listlib_1_t2 {
              background-color: rgba(0, 0, 0, 1);
              width: 50%;
              color: #fff;
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }

            .listlib_1_t3 {
              background-color: rgba(232, 230, 230, 1);
              width: 50%;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }
          }
        }
      }
    }

    .zhes_1 {
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 28rpx;
      justify-content: center;

      .zhes_1_img {
        width: 40rpx;
        height: auto;
        margin-right: 8rpx;
      }

      .zhes_1_t {
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .zhes_2 {
      width: 100%;
      height: auto;
      padding: 0 20rpx;
      box-sizing: border-box;
      margin-bottom: 8rpx;

      .zhes_2li {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx;
        font-weight: bold;
        width: 100%;
        text-align: center;

        text {
          font-family: 'AvantGardeFont';
        }
      }
    }

    .zhes_3 {
      height: 32rpx;
      line-height: 32rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
      width: 100%;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .zhes_4 {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(238, 238, 238, 1);
      padding: 20rpx 30rpx;
      color: rgba(249, 65, 65, 1);
      font-size: 24rpx;
      box-sizing: border-box;
      line-height: 40rpx;
      margin-bottom: 48rpx;
    }

    .zhes_5 {
      width: 100%;
      height: 72rpx;
      border-radius: 100rpx;
      background-color: rgba(249, 191, 65, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      text-align: center;
      line-height: 72rpx;
    }

    .tan {
      padding-bottom: 56rpx;
      margin-top: -231rpx;
    }
  }

  .tan_video {
    width: 650rpx;
    height: 1105rpx;
    padding: 0 0;
    margin-left: -325rpx;
  }

  .tan.tan_video {
    margin-top: -552rpx;
  }

  video {
    width: 650rpx;
    height: 1105rpx;
  }

  .zhen_add {
    width: 100%;
    height: auto;
    border-radius: 10rpx;
    background-color: rgba(255, 246, 228, 1);
    color: rgba(0, 0, 0, 1);
    font-size: 24rpx;
    padding: 10rpx 16rpx;
    box-sizing: border-box;
    margin-top: 12rpx;
  }

  .Countdown {
    height: 96rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 80rpx;
    font-family: 'AvantGardeFont';
    width: 100%;
    text-align: center;
    margin-bottom: 32rpx;
  }

  .dibulicz {
    width: 100%;
    height: auto;
    .dibulicz1 {
      color: rgba(16, 16, 16, 1);
      font-size: 48rpx;
      font-family: 'AvantGardeFont';
    }

    .dibulicz2 {
      width: 160rpx;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 40rpx;
      background-color: rgba(249, 191, 65, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      text-align: center;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
    }

    .dibulicz2.huise {
      background-color: rgba(232, 230, 230, 1);
      color: rgba(16, 16, 16, 1);
    }

    .dibulicz2.hongse {
      background-color: rgba(249, 65, 65, 1);
      color: rgba(255, 255, 255, 1);
    }
  }
</style>